<template>
	<view class="page">
		<!-- 顶部文字 -->
		<!-- <text class="title">用户名密码登录</text> -->
		<!-- <input class="input-box" :inputBorder="false" v-model="userName" placeholder="请输入账号"/>
		<input type="password" class="input-box" :inputBorder="false" v-model="password" placeholder="请输入密码"/> -->
		<!-- <button class="send-btn"  :type="canLogin?'primary':'default'"
			@click="pwdLogin">登录</button> -->

		<view class="logo">
			<image src="../../../../static/logo2.png" mode="widthFix"></image>
		</view>

		<view class="login">
			<view class="login-item">
				<uni-easyinput v-model="userName" prefixIcon="contact-filled" :styles="styles"
					:placeholderStyle="placeholderStyle" placeholder="手机/邮箱/用户名" />
			</view>
			<view class="login-item login-item_second">
				<uni-easyinput v-model="password" class="login-item" :styles="styles"
					:placeholderStyle="placeholderStyle" prefixIcon="locked-filled" type="password" passwordIcon
					placeholder="请输入密码" />
			</view>
		</view>
		<view class="login-btn-box">
			<button class="logout-btn" :type="canLogin?'primary':'default'" @click="pwdLogin">登录</button>
		</view>

	</view>
</template>

<script>
	import mixin from '../common/login-page.mixin.js';
	export default {
		mixins: [mixin],
		data() {
			return {
				"password": "password",
				"userName": "admin",
				"agree": false,
				"captchaBase64": "",
				"captcha": "",
				// 自定义样式
				placeholderStyle: "color:#ccc;font-size:14px",
				styles: {
					color: '#333',
					borderColor: '#169BD5',
				}
			}
		},
		computed: {
			canLogin() {
				return this.userName.length && this.isPwd;
			},
			isPwd() {
				return /^.{6,20}$/.test(this.password);
			},
			isPhone() {
				return /^1\d{10}$/.test(this.phone);
			},
		},
		methods: {
			// 页面跳转，找回密码
			toRetrievePwd() {
				uni.navigateTo({
					url: '../pwd-retrieve/pwd-retrieve?phoneNumber=' + (this.isPhone ? this.username : '') +
						'&phoneArea=' + this.currenPhoneArea
				})
			},
			/**
			 * 密码登录
			 */
			pwdLogin() {
				let loginData = {
					"password": this.password,
					"userName": this.userName
				}
				uni.request({
					url: 'http://116.205.142.103:8808/labor/system/admin/login',
					method: 'POST',
					data: loginData,
					success: res => {
						if (res.data.code == 200) {
							loginData = res.data.data
							debugger
							uni.setStorage({
								key: 'userInfo',
								data: loginData,
								success: function() {
									uni.reLaunch({
										url: "/pages/grid/grid"
									});
								}
							});
						} else {
							uni.showModal({
								content: res.data.text,
								showCancel: false
							});
						}

					}
				})

			},
			createCaptcha() {
				uniCloud.callFunction({
					name: 'uni-id-cf',
					data: {
						action: 'createCaptcha',
						params: {
							scene: "login"
						},
					},
					success: ({
						result
					}) => {
						if (result.code === 0) {
							this.captchaBase64 = result.captchaBase64
						} else {
							uni.showModal({
								content: result.msg,
								showCancel: false
							});
						}
					}
				})
			},
			/* 前往注册 */
			toRegister(e) {
				console.log(e);
				uni.navigateTo({
					url: '/pages/ucenter/login-page/register/register'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding-top: 250rpx;
		/* display: flex; */
	}

	.logo {
		width: 552rpx;
		height: 61rpx;
		margin: 0 auto 100rpx;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.login {
		margin: 50rpx 50rpx 0;
	}

	.login-item {
		margin-bottom: 50rpx;
	}

	.login-item_second {
		margin-bottom: 20rpx;
	}

	.login-btn-box {
		width: 650rpx;
		margin: 80rpx auto 0;

		.login-btn {
			width: 100%;
		}
	}
</style>
